<template>
    <div id="app">
        <h1>{{ projectName }}接口文档</h1>
        <h2>目录</h2>
        <tree-nav :nav-data="navData"></tree-nav>
        <div v-for="chapter in navData">
            <h1 :id="chapter.label">{{ chapter.label }}</h1>
            <div v-for="section in chapter.children">
                <h2 :id="section.label">{{ section.label }}</h2>
                <list :list-data="section.listData"></list>
                <h3>请求</h3>
                <table-container :table-data="section.requestTableData"></table-container>
                <h3>响应</h3>
                <complex-table-container :table-data="section.responseTableData"></complex-table-container>
            </div>
        </div>
        <scrolltop></scrolltop>
    </div>
</template>

<script>
    import navBar from './components/navBar/navBar.vue'
    import treeNav from './components/treeNav/treeNav.vue'
    import tableContainer from './components/tableContainer/tableContainer.vue'
    import complexTableContainer from './components/tableContainer/complexTableContainer.vue'
    import list from './components/list/list.vue'
    import scrolltop from './components/scrolltop/scrolltop.vue'
    import jsonData from './json/jsonData'
    let data = jsonData;

    export default {
        components: {
            'nav-bar': navBar,
            'tree-nav': treeNav,
            'table-container': tableContainer,
            'list': list,
            'scrolltop':scrolltop,
            'complex-table-container':complexTableContainer
        },
        data () {
            return {
                projectName: data.projectName,
                navData: data.navData
            }
        },
    }
</script>

<style>
    body {
        font-family: Helvetica, sans-serif;
    }
</style>
